import React, { useState, useEffect } from 'react';
import { Tree } from 'antd';
import axios from 'axios';

const treeData = [
    {
        title: 'parent 1',
        key: '1',
        children: [
            {
                title: 'parent 1-0',
                key: '1-1',
                // disabled: true,
                children: [
                    {
                        title: 'leaf1',
                        key: '1-1-1',
                        disableCheckbox: true,
                    },
                    {
                        title: 'leaf2',
                        key: '1-1-2',
                    },
                ],
            },
            {
                title: 'parent 1-1',
                key: '1-2',
                children: [
                    {
                        title: (
                            <span
                                style={{
                                    color: '#1677ff',
                                }}
                            >
                                sss
                            </span>
                        ),
                        key: '1-2-1',
                    },
                ],
            },
        ],
    },
];

function buildTree(data, parentKey = null) {
    const tree = [];

    for (const item of data) {
        const node = {
            title: item.title,
            key: item.key,
        };

        if (item.children && item.children.length > 0) {
            node.children = buildTree(item.children, item.key);
        }

        if (parentKey !== null) {
            node.parentKey = parentKey;
        }

        tree.push(node);
    }

    return tree;
}

const tree = buildTree(treeData);
// console.log(tree);
const App = () => {

    const [check, setCheck] = useState(['1-2', '1-2-1']);
    const [expand, setExpand] = useState(['1']);

    const onCheck = (checkedKeys, info) => {
        setCheck(checkedKeys)
    };
    const onExpand = (expandKeys, info) => {
        setExpand(expandKeys);
    };
    useEffect(() => {
        console.log('check', check);
        console.log('expand', expand);
    }, [expand, check]);

    return (
        <div style={{ width: '500px', height: '400px', margin: '200px auto' }}>
            <Tree
                checkable
                defaultExpandedKeys={expand}
                defaultCheckedKeys={check}
                onCheck={onCheck}
                onExpand={onExpand}
                treeData={treeData}

                checkedKeys={check}
                expandedKeys={expand}
            />
        </div>

    );
};
export default App;